<template>
    <div class="userInfo">
        <div class="headInfo">
            <img src="https://img.meituan.net/maoyanuser/7050be720bc70eee8c86c0add2026bc87764.png" class="head-icon">
            <div class="name">{{username}}</div>
        </div>
        <div class="container">
            <div class="group">
                <div class="mb-outline-tb">
                    <div class="orders">
                        <div class="title">我的订单</div>
                        <div class="mb-outline-b title-line"></div>
                        <div class="list list-two">
                            <div class="order-item movie">
                                <a href=""><p>电影</p></a>
                            </div>
                            <div class="order-item store"><a><p>商城</p></a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="mb-outline-tb">
                    <div class="coupon item mb-line-b"><a><span>在线观影</span></a></div>
                    <div class="coupon item mb-line-b"><a><span>优惠券</span></a></div>
                    <div class="membercard item mb-line-b"><a><span>折扣卡</span></a></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                username: ''
            }
        },
        created() {
            let username = sessionStorage.getItem(sessionStorage.key('token'))
            console.log(username)
            this.username = username
        }
    }
</script>

<style scoped lang="scss">
    .userInfo {
        width: 100%;
        margin-top: 1.02rem;
        display: flex;
        flex-direction: column;
        .headInfo {
            background-color: #f03d37;
            background-image: url(../../assets/images/head.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100% 3rem;
            height: 3rem;
            overflow: hidden;
            text-align: center;
            img {
                display: inline-block;
                margin-top: 0.6rem;
                width: 1.2rem;
                height: 1.2rem;
                border-radius: 1.2rem;
                border: 0.06rem solid #fff;
            }
            .name {
                margin-top: 0.14rem;
                font-size: 0.44rem;
                font-weight: bold;
                line-height: 0.45rem;
                color: #fff;
            }
        }
        .container {
            flex: 1;
            .group {
                margin-top: 10px;
                background: #fff;
                .mb-outline-tb {
                    background-size: 1px 1px;
                    .orders {
                        padding: 0 15px;
                        position: relative;
                        overflow: hidden;
                        text-align: center;
                        .title {
                            position: relative;
                            margin: 13px 0 0;
                            font-size: 15px;
                            line-height: 21px;
                            height: 21px;
                            color: #333;
                            z-index: 9;
                            display: inline-block;
                            width: 80px;
                            background-color: #fff;
                        }
                        .mb-outline-b {
                            position: absolute;
                            top: 23px;
                            left: 50%;
                            margin-left: -80px;
                            width: 160px;
                            height: 1px;
                        }
                        .list-two {
                            overflow: hidden;
                            .order-item.movie {
                                background-image: url("../../assets/images/movie.png");
                                width: 50%;
                                float: left;
                                height: 97px;
                                background-repeat: no-repeat;
                                background-position: top;
                                background-size: 42px auto;
                                margin-top: 18px;
                                a {
                                    display: block;
                                    height: 90px;
                                }
                                p {
                                    position: relative;
                                    top: 53px;
                                    text-align: center;
                                    font-size: 15px;
                                    line-height: 21px;
                                    height: 21px;
                                    margin: 0;
                                    color: #333;
                                }
                            }
                            .order-item.store {
                                background-image: url("../../assets/images/store.png");
                                float: left;
                                height: 97px;
                                background-repeat: no-repeat;
                                background-position: top;
                                background-size: 42px auto;
                                margin-top: 18px;
                                width: 50%;
                                a {
                                    display: block;
                                    height: 90px;
                                }
                                p {
                                    position: relative;
                                    top: 53px;
                                    text-align: center;
                                    font-size: 15px;
                                    line-height: 21px;
                                    height: 21px;
                                    margin: 0;
                                    color: #333;
                                }
                            }
                        }
                    }
                    .item {
                        position: relative;
                        height: 44px;
                        line-height: 44px;
                        font-size: 15px;
                        margin-left: 15px;
                        padding-right: 15px;
                        border-bottom: 0.5px solid #eeeeee;
                        a {
                            display: block;
                            color: #333;
                        }
                        span {
                            text-align: left;
                            font-size: 0.28rem;
                        }
                    }
                }
            }
        }
    }
</style>